@CHARSET "UTF-8";
body {
	background-image: url(img/cgkscbbg.jpg);
	background-repeat: no-repeat;
	position: relative;
}
.appclass{
	position: absolute;
	top: 47%;
	margin-top: 0px;
	width: 100%;
	text-align: center;
}
.head-title{
	text-align: center;
	font-size: 25px;
	color: #5A70B2;
	letter-spacing: 1px;
}
.container{
	display: inline-block;
	width: 900px;
	margin-top: 30px;
}
.container>div{
	box-sizing: border-box;
	display: inline-block;
	padding: 0 10px;
}
.container .left{
	width: 43.5%;
	vertical-align: top;
}
.container .center{
	width: 5%;
	height: 368px;
	text-align: left;
	vertical-align: top;
}
.container .right{
	padding-top: 15px;
	width: 50%;
}
.line-area{
	position: relative;
	margin: 10px 0 8px 0;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #586EB1;
}
.line-area .title{
	display: inline-block;
	position: relative;
	padding: 0 10px;
	background-color: #FBFBFB;
}
.line-area .line{
	position: absolute;
	width: 100%;
	height: 1px;
	top: 14.5px;
	background: -webkit-linear-gradient(left, transparent, #586EB1, transparent);
	background: -moz-linear-gradient(left, transparent, #586EB1, transparent);
	background: -o-linear-gradient(left, transparent, #586EB1, transparent);
	background: linear-gradient(to right, transparent, #586EB1, transparent);
}
.vertical-line{
	display: inline-block;
	width: 2px;
	height: 100%;
	background: -webkit-linear-gradient(top, transparent, #D4D4D4, transparent);
	background: -moz-linear-gradient(top, transparent, #D4D4D4, transparent);
	background: -o-linear-gradient(top, transparent, #D4D4D4, transparent);
	background: linear-gradient(to bottom, transparent, #D4D4D4, transparent);
}
.content{
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 15px;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}
.left .content{
	text-align: center;
}
.open-btn{
	display: inline-block;
	border-radius: 5px;
	width: 100%;
	max-width: 395px;
	padding: 5px 0;
	text-align: center;
	font-size: 18px;
	letter-spacing: 8px;
	color: #fff;
	cursor: pointer;
	background: #007DFE;
	background: -webkit-linear-gradient(left, #007BFF, #08d2f9, #007BFF);
	background: -moz-linear-gradient(left, #007BFF, #08d2f9, #007BFF);
	background: -o-linear-gradient(left, #007BFF, #08d2f9, #007BFF);
	background: linear-gradient(to right, #007BFF, #08d2f9, #007BFF);
	background-size: 200% 200%;
	transition: background-position 0.5s ease;
}
.open-btn.readonly{
	background: #ccc;
	cursor: not-allowed;
}
.open-btn:hover{
	background-position: 100% 0;
}
.el-tag--primary{
	border-color: #BDE7FF;
	background-color: #E8F6FF;
	font-size: 14px;
	font-weight: normal;
	padding: 0 10px;
	margin-right: 15px;
}

/* 全屏按钮 */
.full-btn{
	cursor: pointer;
	position: fixed;
	top: 20px;
	right: 20px;
}
.full-btn.back{
	display: none;
}


/* 数字时钟样式 */
.digits{
	height: 135px;
	margin: 20px 0 20px 0;
	text-align: center;
}

.digits div {
	text-align: left;
	position: relative;
	width: 28px;
	height: 50px;
	display: inline-block;
	margin: 0 5px;
}

.digits div span {
	background-color: #000;
	border-color: #000;
	box-shadow: 3px -1px 8px 3px #c6e6ef;
}

.digits div.dots:before, .digits div.dots:after
{
	background-color: #000;
}


.digits div span {
	opacity: 0;
	position: absolute;
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	transition: 0.25s;
}

.digits div span:before, .digits div span:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border: 5px solid transparent;
}

.digits .d1 {
	height: 5px;
    width: 14px;
    top: 0;
    left: 7px;
}

.digits .d1:before {
	border-width: 0 5px 5px 0;
	border-right-color: inherit;
	left: -5px;
}

.digits .d1:after {
	border-width: 0 0 5px 5px;
	border-left-color: inherit;
	right: -5px;
}

.digits .d2 {
	height: 5px;
    width: 14px;
    top: 22px;
    left: 7px;
}

.digits .d2:before {
	border-width: 3px 4px 2px;
	border-right-color: inherit;
	left: -8px;
}

.digits .d2:after {
	border-width: 3px 4px 2px;
	border-left-color: inherit;
	right: -8px;
}

.digits .d3 {
	height: 5px;
	width: 14px;
    top: 44px;
    left: 7px;
}

.digits .d3:before {
	border-width: 5px 5px 0 0;
	border-right-color: inherit;
	left: -5px;
}

.digits .d3:after {
	border-width: 5px 0 0 5px;
	border-left-color: inherit;
	right: -5px;
}

.digits .d4 {
	width: 5px;
	left: 0;
    height: 12px;
    top: 7px;
}
.digits .d4:before {
	border-width: 0 5px 5px 0;
	border-bottom-color: inherit;
	top: -5px;
}
.digits .d4:after {
	border-width: 0 0 5px 5px;
	border-left-color: inherit;
	bottom: -5px;
}
.digits .d5 {
	width: 5px;
	top: 7px;
	right: 0;
    height: 12px;
}

.digits .d5:before {
	border-width: 0 0 5px 5px;
	border-bottom-color: inherit;
	top: -5px;
}

.digits .d5:after {
	border-width: 5px 0 0 5px;
	border-top-color: inherit;
	bottom: -5px;
}

.digits .d6 {
	width: 5px;
	left: 0;
    height: 12px;
    top: 30px;
}

.digits .d6:before {
	border-width: 0 5px 5px 0;
	border-bottom-color: inherit;
	top: -5px;
}
.digits .d6:after {
	border-width: 0 0 5px 5px;
	border-left-color: inherit;
	bottom: -5px;
}

.digits .d7 {
	width: 5px;
	right: 0;
	height: 12px;
    top: 30px;
}
.digits .d7:before {
	border-width: 0 0 5px 5px;
	border-bottom-color: inherit;
	top: -5px;
}
.digits .d7:after {
	border-width: 5px 0 0 5px;
	border-top-color: inherit;
	bottom: -5px;
}


/* 1 */
.digits div.one .d5, .digits div.one .d7 {
	opacity: 1;
}

/* 2 */
.digits div.two .d1, .digits div.two .d5, .digits div.two .d2,
 .digits div.two .d6, .digits div.two .d3 {
	opacity: 1;
}

/* 3 */
.digits div.three .d1, .digits div.three .d5, .digits div.three .d2,
 .digits div.three .d7,  .digits div.three .d3 {
	opacity: 1;
}

/* 4 */
 .digits div.four .d5, .digits div.four .d2, .digits div.four .d4,
 .digits div.four .d7 {
	opacity: 1;
}

/* 5 */
 .digits div.five .d1,  .digits div.five .d2,  .digits div.five .d4,
	 .digits div.five .d3,  .digits div.five .d7 {
	opacity: 1;
}

/* 6 */
 .digits div.six .d1, .digits div.six .d2, .digits div.six .d4,
	 .digits div.six .d3, .digits div.six .d6, .digits div.six .d7
	{
	opacity: 1;
}

/* 7 */
 .digits div.seven .d1, .digits div.seven .d5, .digits div.seven .d7
	{
	opacity: 1;
}

/* 8 */
 .digits div.eight .d1,  .digits div.eight .d2, .digits div.eight .d3,
	 .digits div.eight .d4, .digits div.eight .d5, .digits div.eight .d6,
	 .digits div.eight .d7 {
	opacity: 1;
}

/* 9 */
 .digits div.nine .d1, .digits div.nine .d2, .digits div.nine .d3,
 .digits div.nine .d4, .digits div.nine .d5, .digits div.nine .d7
{
	opacity: 1;
}

/* 0 */
 .digits div.zero .d1, .digits div.zero .d3, .digits div.zero .d4,
 .digits div.zero .d5, .digits div.zero .d6, .digits div.zero .d7
{
	opacity: 1;
}

.digits div.dots{
	width: 10px;
}

.digits div.dots:before, .digits div.dots:after {
	width: 5px;
	height: 5px;
	content: '';
	position: absolute;
	left: 50%;
	top: 14px;
	margin-left: -2.5px;
}

.digits div.dots:after {
	top: 34px;
}